Skip to main content Skip to docs navigation
View on GitHub

Bootstrap 入门

Bootstrap 是一个功能强大、功能丰富的前端工具包。在几分钟内构建任何东西 - 从原型到生产。

On this page

快速上手

无需任何构建步骤，即可通过 CDN 开始使用 Bootstrap 的生产就绪 CSS 和 JavaScript。请观看 Bootstrap CodePen 演示。


  1. 在项目的根目录创建一个新文件 index.html 。 同时包含 <meta name="viewport"> 标签，以便在移动设备上实现正确的响应行为。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. 引入 Bootstrap’s CSS 和 JS。 在 <head> 中放置 <link> 标签，用于 CSS；在 <script> 标签中放置 <script> 标签，用于 JavaScript 包（包括用于定位下拉菜单、弹出窗口和工具提示的 Popper）。进一步了解我们的 CDN 链接。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Y3IQOsa3niuvpqakr8NIT3EETRv0G6tFumi3detLTSYuXBc6XxbPEt9sOg6OcLgO" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-r5kRSTMtRNVfwqCvIzNkemSRRqsQB3BJN5m7GjomHUT+81f70U37lfRUk9tJSSQO" crossorigin="anonymous"></script>
  </body>
</html>

    您还可以单独包含Popper和JS。如果您不打算使用下拉菜单、弹出窗口或工具提示，请通过不包括Popper来节省大小。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-BRzTbsDillcZ9cJS3keZSZIggjuMr6yO0NydiQOk5xguSoFlRpj4FALnfgmFMjai" crossorigin="anonymous"></script>

  3. Hello, world! 在您选择的浏览器中打开该页面，即可看到您的 Bootstrapped 页面。现在，您可以开始使用 Bootstrap 创建自己的layout，添加数十个组件，并使用我们的官方示例。

CDN 链接

以下是我们的主要 CDN 链接，以供参考。

Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

您还可以使用CDN获取目录页面中列出的其他版本链接。

下一步

JS 组件

想知道哪些组件明确需要我们的 JavaScript 和 Popper 吗？如果您对一般页面结构有任何不确定，请继续阅读页面模板示例。

  • 用于解除的警报
  • 用于切换状态和复选框/无线电功能的按钮
  • 用于所有幻灯片行为、控件和指示器的旋转木马
  • 折叠用于切换内容的可见性
  • 用于显示和定位的下拉菜单 (（也需要 Popper)
  • 模态，用于显示、定位和滚动行为
  • 导航栏用于扩展我们的 Collapse 和 Offcanvas 插件，以实现响应行为
  • 使用 Tab 插件切换内容面板的导航条
  • 用于显示、定位和滚动行为的 Offcanvases
  • Scrollspy 用于滚动行为和导航更新
  • 用于显示和取消的祝酒词
  • 用于显示和定位的工具提示和弹出窗口（也需要 Popper）

重要全局项

Bootstrap 采用了一些重要的全局样式和设置，所有这些几乎都是为了实现跨浏览器样式的规范化。让我们深入了解一下。

HTML5 类型

Bootstrap 要求使用 HTML5 doctype。如果不使用它，你会看到一些时髦和不完整的样式。

<!doctype html>
<html lang="en">
  ...
</html>

Viewport meta

Bootstrap 采用移动优先的开发策略，即首先针对移动设备优化代码，然后根据需要使用 CSS 媒体查询放大组件。为确保所有设备都能正确呈现和触摸缩放，请在 <head> 中添加响应视口元标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

可以通过 quick start.

方框大小

为了在 CSS 中更直接地调整大小，我们将全局框大小box-sizing值从 content-box 切换为 border-box。这样可以确保填充不会影响元素的最终计算宽度，但可能会给某些第三方软件（如谷歌地图和谷歌自定义搜索引擎）带来问题。

在极少数情况下，如果你需要覆盖它，可以使用类似下面的方法：

.selector-for-some-widget {
  box-sizing: content-box;
}

通过上述代码段，嵌套元素（包括通过 ::before 和 ::after 生成的内容）都将继承 .selector-for-some-widget 的指定方框大小。

了解关于更多 框模型和大小调整的知识。

Reboot

为了改善跨浏览器渲染，我们使用 Reboot 来纠正不同浏览器和设备之间的不一致，同时对常见的 HTML 元素进行更有主见的重置。

社区

Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Read and subscribe to The Official Bootstrap Blog.
  • Ask questions and explore our GitHub Discussions.
  • Discuss, ask questions, and more on the community Discord or Bootstrap subreddit.
  • Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-5).
  • Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.